<template>
  <div>
    <div class="background">
      <img :src="music_pto" alt="" />
    </div>
    <div class="detail">
      <div class="detail_img">
        <div>
          <img
            src="../../public/images/singlecover.png"
            alt=""
            class="img1"
            :class="show ? '' : 'img_rotate'"
          />
          <img
            :src="music_pto"
            alt=""
            class="img2"
            :class="show ? '' : 'img_rotate'"
          />
        </div>
      </div>
      <div class="lyrics_list">
        <h2>{{ music_name }}</h2>
        <span>专辑：{{ tns }}</span>
        <span>歌手：{{ ar_name }}</span>
        <span>来源：{{ tns }}</span>
        <p v-for="(item, index) in arr" :key="index" :data-time="item.key">
          {{ item.value }}
        </p>
      </div>
    </div>
    <div class="footer">
      <div class="footer_info">
        <img :src="music_pto" alt="" />
        <div class="info">
          <div>{{ music_name }}</div>
          <div>{{ ar_name }}</div>
          <div>{{ tns }}</div>
        </div>
      </div>
      <div class="play_control">
        <el-icon><ArrowLeft @click="pre" /></el-icon>
        <el-icon v-show="show" @click="play"><VideoPlay /></el-icon>
        <el-icon v-show="!show" @click="parse"><VideoPause /></el-icon>
        <el-icon><ArrowRight @click="next" /></el-icon>
      </div>
      <div class="play_sound">
        <img
          v-show="!show1"
          src="../../public/images/24gl-volumeCross.png"
          alt=""
          @click="sound"
        />
        <img
          v-show="show1"
          src="../../public/images/24gf-volumeCross.png"
          alt=""
          @click="sound"
        />
      </div>
      <audio :src="music_src" id="audio" @timeupdate="updateTime" autoplay></audio>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import transform from "../service/lyric";
import { reactive, ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { useRoute } from "vue-router";
export default {
  name: "Detail",
  setup() {
    let playlist = reactive({
      list: [],
      active: "",
    });
    let arr = ref([]);
    let show = ref(false);
    let music_src = ref("");
    let music_name = ref("");
    let tns = ref("");
    let ar_name = ref("");
    let music_pto = ref("");
    let show1 = ref(true);
    let route = useRoute();
    // let audio = ref(null)
    onMounted(() => {
      console.log(route.params);
      playlist.list = route.params.allIds;
      playlist.active = route.params.musicId;
      // 获取歌词
      const id = playlist.active;
      api(id)
    });
    // 监听函数
    function addevent() {
      const lyrics_list = document.querySelector(".lyrics_list");
      return (e) => {
        // console.log(e.target.currentTime);
        //   获取p节点
        let i = 0;
        const currentTime = e.target.currentTime;
        const p = document.querySelectorAll("p");
        if (!p.length) return;
        // console.log(p,'p');
        Array.from(p).forEach((item) => {
          const time = item.getAttribute("data-time");
          if (currentTime > time) i++;
          item.classList.remove("active");
        });
        if (i - 1 < 0) {
          p[0].classList.add("active");
        } else {
          p[i - 1].classList.add("active");
          // 中间参数
          let top = 0;
          if (p[i - 1].offsetTop < 300) {
            top = p[i - 1].offsetTop;
          } else {
            lyrics_list.scrollTop = p[i - 1].offsetTop - top - 200;
          }
        }
      };
    }
    // 播放
    function play() {
      const audio = document.querySelector("#audio");
      audio.play();
      show.value = false;
      audio.addEventListener("timeupdate", addevent());
    }
    // 暂停
    function parse() {
      const audio = document.querySelector("#audio");
      audio.pause();
      audio.removeEventListener("timeupdate", addevent());
      console.log(audio.currentTime);
      show.value = true;
    }
    // 取消静音 // 静音
    function sound() {
      const audio = document.querySelector("#audio");
      if (audio.volume == 0) {
        audio.volume = 1;
        show1.value = true;
      } else {
        audio.volume = 0;
        show1.value = false;
      }
    }
    // 请求函数
    function api(id) {
      axios.get(`http://127.0.0.1:3000/lyric?id=${id}`).then(
        (res) => {
          if (res.data.code == 200) {
            console.log('获得歌词',res.data);
            let lyricArr = res.data.lrc.lyric.split("[").slice(1);
            console.log(transform(lyricArr));
            arr.value = transform(lyricArr);
          }
        },
        (error) => {
          console.log(error);
        }
      );
      // 获取音乐播放地址
      axios.get(`http://127.0.0.1:3000/song/url?id=${id}`).then(
        (res) => {
          console.log('音乐播放地址',res.data.data[0].url);
          music_src.value = res.data.data[0].url;
          const audio = document.querySelector("#audio");
          audio.addEventListener("timeupdate", addevent());
        },
        (error) => {
          console.log(error);
        }
      );
      //  获取歌曲详情
      axios.get(`http://127.0.0.1:3000/song/detail?ids=${id}`).then(
        (res) => {
          console.log("歌曲详情", res.data);
          // 歌曲名
          music_name.value = res.data.songs[0].name;
          // 专辑
          tns.value = res.data.songs[0].al.name;
          // 歌手名
          ar_name.value = res.data.songs[0].ar[0].name;
          // 图片
          music_pto.value = res.data.songs[0].al.picUrl;
        },
        (error) => {
          console.log(error);
        }
      );
    }
    // 上一首
    function pre() {
      let index = playlist.list.indexOf(playlist.active)
      if(index==0){
        index = playlist.list.length-1
      }else{
        index--
      }
      api(playlist.list[index])
      console.log("上一首");
    }
    // 下一首
    function next() {
      let index = playlist.list.indexOf(playlist.active)
      if(index==playlist.list.length-1){
        index = 0 
      }else{
        index++
      }
      api(playlist.list[index])
      console.log("下一首");
    }
    return {
      arr,
      show,
      music_src,
      music_name,
      tns,
      ar_name,
      music_pto,
      show1,
      sound,
      play,
      parse,
      pre,
      next,
    };
  },
};
</script>

<style scoped>
.background img {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: -10;
  /* 图片模糊化 */
  filter: blur(15px);
  /* object-fit: none; */
  /* filter: (10px); */
}
.background::after {
  float: left;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}
.detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.detail .detail_img {
  position: relative;
}
.detail .detail_img img {
  position: absolute;
  top: 40%;
  left: 40%;
  animation-fill-mode: backwards;
}
.img_rotate {
  animation: rotating 8s linear 0s infinite;
}
.detail_img .img1 {
  z-index: 9;
}
.detail_img .img2 {
  border-radius: 50%;
  width: 130px;
  margin-left: 38px;
  margin-top: 38px;
}
@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.detail .lyrics_list {
  height: 730px;
  overflow-y: scroll;
  color: #ffffff;
}
.lyrics_list::-webkit-scrollbar {
  width: 8px;
}
.lyrics_list::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 100px;
  display: none;
}
.lyrics_list::-webkit-scrollbar-thumb {
  background-color: #cdcdcd;
  border-radius: 100px;
}
.lyrics_list p {
  text-align: center;
}
.footer {
  display: flex;
  position: fixed;
  bottom: 10px;
  width: 50%;
  background-color: #ffffff;
}
.footer .footer_info img {
  width: 100px;
}
.footer .footer_info {
  width: 300px;
  display: flex;
  margin-left: 10px;
}
.footer_info .info {
  margin-top: 10px;
  line-height: 30px;
  margin-left: 10px;
}
.footer .play_control {
  width: 200px;
  height: 50px;
  font-size: 50px;
  color: #1fd2a8;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.footer .play_sound img {
  width: 40px;
  margin-top: 35px;
  cursor: pointer;
}
.active {
  color: #1fd2a8;
}
</style>
